<template>
	<div>
		<el-row type="flex" class="row-bg" style="margin: 10px; margin-top: 90px;">
			<el-col :span="2"></el-col>
			<el-col :span="9" class="messgebox">
				<dv-border-box-10><p class="messge1">学生人数<br>
					<span>{{ student_num }}</span> 人</p></dv-border-box-10>
			</el-col>
			<el-col :span="2"></el-col>
			<el-col :span="9" class="messgebox">
				<dv-border-box-10><p class="messge1">教职工数<br>
					<span>{{ teacher_num }}</span> 人</p></dv-border-box-10>
			</el-col>
			<el-col :span="2"></el-col>
		</el-row>

		<dv-border-box-13>
			<div class="sushe" style="height: 350px; margin-top:50px;">
			<div class="title-h1">[学生宿舍]</div>
			<dv-scroll-board :config="data1Dam" style="color:#01c4f7;text-align: center; margin-top: 10px;height:260px" /></dv-scroll-board>

			</div>
		</dv-border-box-13>
	</div>
</template>
<script>
export default {
	name: 'Left',
	components: {

	},
	props: {
		rows: {
			default: {}
		},
		info: {
			default: {}
		}
	},
	data(){
		return {
			data1Dam: {},
			data2Dam: {},
			dataheader: ["宿舍楼","总人数","归寝人数"],
			data1: [
      ],
      goodResultNum: 0,
      badResultNum: 0,

      student_num: 0,
      teacher_num: 0,
      dorms_nums: [],
      configPingjia: {},
      names: [],
      snames: [],
		}
	},
	mounted(){
    this.$watch('info', () => {
    	this.dorms_nums = this.info.dorms_nums
    	this.student_num = this.info.student_num
    	this.teacher_num = this.info.teacher_num
    	this.data1Dam = {
	      data: this.resetData(this.info.dorms_nums), // 表数据
	      header: this.dataheader, // 表头数据
	      rowNum: 7, // 表行数
	      headerBGC: '#021950', // 表头背景色
	      oddRowBGC: '#0b1547', // 奇数行背景色
	      evenRowBGC: '#000a3b', // 偶数行背景色
	      waitTime: 2000, // 轮播时间间隔(ms)
	      align: 'center'
	    };
	    this.configPingjia = {
			  title: {
			    show: false
			  },
			  grid: {
			  	top: '10%'
			  },
			  xAxis: {
			    data: this.names,
					axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff'
            }
          },
			  },
			  yAxis: {
			    data: 'value',
			    axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
			  },
			  series: [
			    {
			      data: this.snames,
			      type: 'bar',
			      label: {
			      	show: true,
			      	style: {
							  fill: '#fff'
							}
			      }
			    }
			  ]
			}
    })
	},
	methods: {
		resetData(list){
			var data = []
			var names = []
			var snames = []
			for (var i in list) {
				data.push([list[i]['name'], list[i]['num'], list[i]['gnum']])
				names.push(list[i]['name'])
				snames.push(list[i]['num'])
			}
			this.names = names
			this.snames = snames
			return data
		}
	}
};
</script>
<style lang="less" scope>
.sushe{ height: 360px; width: 90%;margin: 30px auto; padding-top: 10px;margin-top: 60px; }
.sushe .title-h1{ padding-top: 20px; }
.messge1{
  font-size:25px;
  color:#54fd02;
  text-align: center;
  margin: 10px;
  padding-top: 20px;
}
.messge1 span{
  font-size:30px;
  color:#fff;
  font-weight: bold;
}
</style>